import { useEffect, useState } from 'react'
import styles from './index.module.css'
import './index.scss'
// 导入导航栏组件
import NavHeader from "@/components/NavHeader"
// 导入 HouseItem 组件
import HouseItem from '../../components/HouseItem'
//导入地图找房相关Api
import { houseByIdApi, houseDetailByIdApi } from '@/apis/map.js'
import { Toast } from 'antd-mobile'
// 导入BASE_URL
import { BASE_URL } from '../../utils/url'
import { useNavigate, Link } from 'react-router-dom'
// 覆盖物样式
const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255, 0, 0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rgb(255, 255, 255)',
    textAlign: 'center'
}
// 设置全局地图组件访问变量
let map = null;
// 设置全局地图实例对象
let AMap = null;

const Map = () => {
    //获取跳转对象
    const navigate = useNavigate()
    //房屋列表信息
    const [housesList, setHousesList] = useState([])
    //展示房源列表状态
    const [ShowList, setShowList] = useState(false)
    //根据定位的城市获取定位城市的信息
    function getPointionCityInfo() {
        //从本地存储中获取定位城市
        const { label, value } = JSON.parse(localStorage.getItem("hkzf_city"));
        //根据城市名称逆解析城市信息
        fetch(`https://restapi.amap.com/v3/geocode/geo?address=${label}&key=9926298cea7dcd3cf9a4710f2dc6b1fd`)
            .then(res => res.json())
            .then(res => {
                const point = res.geocodes[0].location.split(',')
                //初始化地图
                initMap(point, value)
            })
    }
    //获取渲染的覆盖物房源信息
    async function getHouseData(id) {
        try {
            // 开启loading
            Toast.loading('加载中...', 0, null, false)
            const res = await houseByIdApi(id)
            // 关闭 loading
            Toast.hide()
            res.body.forEach(item => {
                //获取缩放级别和缩放类型
                const { nextZoom, type } = getTypeAndZoom()
                createOverlays(item, nextZoom, type)

            })
        } catch (error) {
            // 关闭 loading
            Toast.hide()
        }
    }
    // 计算要绘制的覆盖物类型和下一个缩放级别
    // 区   -> 11 ，范围：>=10 <12
    // 镇   -> 13 ，范围：>=12 <14
    // 小区 -> 15 ，范围：>=14 <16
    function getTypeAndZoom() {
        //获取当前地图的缩放级别
        const zoom = map.getZoom()
        let nextZoom, type
        if (zoom >= 10 && zoom < 12) {
            nextZoom = 13
            type = 'circle'
        } else if (zoom >= 12 && zoom < 14) {
            nextZoom = 15
            type = 'circle'
        } else if (zoom >= 14 && zoom < 16) {
            type = 'rect'
        }

        return {
            nextZoom,
            type
        }
    }
    // 创建覆盖物
    function createOverlays(data, zoom, type) {
        const {
            coord: { longitude, latitude },
            label: areaName,
            count,
            value
        } = data

        // 创建坐标对象
        const areaPoint = new AMap.LngLat(longitude, latitude)

        if (type === 'circle') {
            // 区或镇
            createCircle(areaPoint, areaName, count, value, zoom)
        } else {
            // 小区
            createRect(areaPoint, areaName, count, value)
        }
    }
    //初始化地图组件
    function initMap(point, id) {
        //初始化地图组件
        window.AMapLoader.load({
            key: "569f38698ec96acd1aa552b835cbd0e5", //申请好的Web端开发者key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
            .then(async (Amap) => {
                //设置全局地图实例对象
                AMap = Amap
                console.log(point);
                //JS API 加载完成后获取AMap对象
                console.log(AMap);
                //赋值地图组件全局对象
                map = new AMap.Map("map", {
                    viewMode: '2D', //默认使用 2D 模式
                    zoom: 11, //地图级别
                    center: point, //地图中心点
                });
                //监听地图移动事件
                map.on('mapmove', () => {
                    setShowList(false)
                });
                //加载比例尺
                //异步加载控件
                AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.Geolocation', 'AMap.ControlBar', 'AMap.MapType'], function () {
                    //添加缩放工具条
                    var toolbar = new AMap.ToolBar(); //缩放工具条实例化
                    map.addControl(toolbar);
                    //添加比例尺
                    var scale = new AMap.Scale(); //比例尺工具条实例化
                    map.addControl(scale);
                    //添加鹰眼
                    var hawkEye = new AMap.HawkEye(); //鹰眼工具条实例化
                    map.addControl(hawkEye);
                    //添加定位
                    // var geolocation = new AMap.Geolocation(); //定位工具条实例化
                    // map.addControl(geolocation);
                    //添加罗盘
                    // var controlBar = new AMap.ControlBar(); //罗盘工具条实例化
                    // map.addControl(controlBar);
                    // 添加图层切换
                    var mapType = new AMap.MapType(); //图层切换工具条实例化
                    map.addControl(mapType);

                });
                //获取房屋覆盖信息
                getHouseData(id)

            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });
    }
    // 创建区、镇覆盖物
    function createCircle(point, name, count, id, zoom) {
        var text = new AMap.Text({
            text: "", //标记显示的文本内容
            anchor: "center", //设置文本标记锚点位置
            clickable: true,//是否可点击
            draggable: false, //是否可拖拽
            cursor: "pointer", //指定鼠标悬停时的鼠标样式。
            style: labelStyle,
            offset: [-35, -35],//点标记显示位置偏移量
            position: point, //点标记在地图上显示的位置
        });
        text.setMap(map); //将文本标记设置到地图上
        //设置文本信息
        text.setText(`
          <div class="${styles.bubble}">
            <div class="${styles.name}">${name}</div>
            <div>${count}套</div>
          </div>`)
        //添加点击事件
        text.on('click', (e) => {
            // 调用 getHouseData 方法，获取该区域下的房源数据
            getHouseData(id)
            setTimeout(() => {
                // 清除当前所有的覆盖物信息
                map.clearMap();
                map.setZoomAndCenter(zoom, point); //同时设置地图层级与中心点
            }, 0)
        })

    }
    // 创建小区覆盖物
    function createRect(point, name, count, id, zoom) {
        var text = new AMap.Text({
            text: "", //标记显示的文本内容
            anchor: "center", //设置文本标记锚点位置
            clickable: true,//是否可点击
            draggable: false, //是否可拖拽
            cursor: "pointer", //指定鼠标悬停时的鼠标样式。
            style: labelStyle,
            offset: [-50, -28],//点标记显示位置偏移量
            position: point, //点标记在地图上显示的位置
        });
        text.setMap(map); //将文本标记设置到地图上
        //设置文本信息
        text.setText(`
        <div class="${styles.rect}">
        <div class="${styles.housename}">${name}</div>
        <div class="${styles.housenum}">${count}套</div>
        <i class="${styles.arrow}"></i>
      </div>`)
        //添加点击事件
        text.on('click', (e) => {
            console.log(e)
            // 获取并渲染房源数据
            getHousesList(id)
            //地图中心平移至某处
            setTimeout(() => {
                // map.panTo(point)
                // 获取当前被点击项
                const target = e.originEvent.pixel
                console.log(e);
                map.panBy(
                    window.innerWidth / 2 - target.x,
                    (window.innerHeight - 330) / 2 - target.y
                )
            }, 0)
        })
    }
    // 获取小区房源数据
    async function getHousesList(id) {
        try {
            //清空之前的房源列表
            setHousesList([])
            // 开启loading
            Toast.loading('加载中...', 0, null, false)

            const res = await houseDetailByIdApi(id)
            console.log('数据', res.body.list);
            // 关闭 loading
            Toast.hide()
            //设置房源列表信息
            setHousesList(res.body.list)
            // 展示房源列表
            setShowList(true)
        } catch (e) {
            // 关闭 loading
            Toast.hide()
        }
    }
    // 封装渲染房屋列表的方法
    function renderHousesList() {
        return housesList.map(item => (
            <HouseItem
                onClick={() => navigate(`/detail/${item.houseCode}`)}
                key={item.houseCode}
                src={BASE_URL + item.houseImg}
                title={item.title}
                desc={item.desc}
                tags={item.tags}
                price={item.price}
            />
        ))
    }
    //异步请求
    useEffect(() => {
        //获取定位城市信息初始化地图
        getPointionCityInfo()
    }, [])
    return (
        <div id='map-box'>
            {/* 导航组件 */}
            <NavHeader myStyle={{ marginTop: "-45px" }}>地图找房</NavHeader>
            {/* 地图 */}
            <div id='map'></div>
            {/* 房源列表 */}
            {/* 添加 styles.show 展示房屋列表 */}
            <div
                className={[
                    styles.houseList,
                    ShowList ? styles.show : ''
                ].join(' ')}
            >
                <div className={styles.titleWrap}>
                    <h1 className={styles.listTitle}>房屋列表</h1>
                    <Link className={styles.titleMore} to="/home/list">
                        更多房源
                    </Link>
                </div>

                <div className={styles.houseItems}>
                    {/* 房屋结构 */}
                    {renderHousesList()}
                </div>
            </div>
        </div >
    )
}

export default Map